<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElTag, ElButton } from 'element-plus'
import {router} from "../router/index.js";
import axios from "axios";

// 模拟数据
const tableData = ref([])

// 筛选条件
const filterForm = ref({})

// 分页

const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(1)
const handleSizeChange=(newSize)=>{
  pageSize.value = newSize
  init();
};
const handleCurrentChange=(newPage)=> {
  currentPage.value = newPage
  init();
};

// 状态颜色映射
const statusColors = {
  '已取消': 'status-grey',
  '已完成': 'status-purple'
}

//查看详情
const goToDetails = (row)=>{
  router.push(`/main/goToDetails?contractId=${row.contractId}`)
}
//初始值
const dateRange = ref([]);
const init = ()=>{
  if(dateRange.value !== null && dateRange.value !== undefined) {
    filterForm.value.startTime = dateRange.value[0];
    filterForm.value.endTime = dateRange.value[1];
  }else {
    filterForm.value.startTime = '';
    filterForm.value.endTime = '';
  }
  axios.post(`/contract/recordList/${currentPage.value}/${pageSize.value}`,filterForm.value).then(res=>{
    tableData.value = res.data.data;
    total.value = res.data.total;
  })
}
const packageOptions = ref([])
//下拉框
const getDropdown = ()=>{
  axios.get('/dropdown/getStatusRecord').then(res=>{
    packageOptions.value.status = res.data
  })
  axios.get('/dropdown/getInstitution').then(res=>{
    packageOptions.value.institution = res.data
  })
  axios.get('/dropdown/getTeam').then(res=>{
    packageOptions.value.team = res.data
  })
  axios.get('/dropdown/getPackage').then(res=>{
    packageOptions.value.packageInfo = res.data
  })
}
//导出
const exportExcel = ()=>{
  location.href = "http://localhost:8080/contract/downloadRecord"
}
//清空
const clear = ()=>{
  filterForm.value = {}
  dateRange.value = null
  init();
}
onMounted(() => {
  // 这里可以添加数据获取逻辑
  getDropdown();
  init();
})
</script>

<template>
  <div class="service-container">
      <div class="header-container">
        <!-- 蓝色竖条 -->
        <div class="blue-pillar"></div>

        <!-- 主标题 -->
        <h1 class="service-title">服务记录</h1>
      </div>
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="filter-item">
            <span class="filter-label">服务状态</span>
            <el-select v-model="filterForm.status" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click="init"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="filter-item">
            <span class="filter-label">服务机构</span>
            <el-select v-model="filterForm.institution" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.institution"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click="init"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="filter-item">
            <span class="filter-label">医生团队</span>
            <el-select v-model="filterForm.team" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.team"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click="init"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6" class="action-buttons">
          <el-button @click="clear">清空</el-button>
          <el-button @click="exportExcel">导出</el-button>

        </el-col>
      </el-row>
      <div style="height: 14px;"></div> <!-- 可通过修改 height 调整间距 -->
      <el-row :gutter="20" class="filter-row second-filter">
        <el-col :span="6">
          <div class="filter-item">
            <span class="filter-label">服务包</span>
            <el-select v-model="filterForm.packageInfo" placeholder="请选择">
              <el-option
                  v-for="item in packageOptions.packageInfo"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  @click="init"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="filter-item">
            <span class="filter-label">预约时间</span>
            <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="init"
            />
          </div>
        </el-col>
        <el-col :span="10">
          <div class="filter-item">
            <el-input
                v-model="filterForm.keyword"
                placeholder="请输入关键字"
                :suffix-icon="Search"
                @keyup.enter="init"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" class="service-table" stripe >
<!--      <el-table-column type="selection"  width="50"></el-table-column>-->
      <el-table-column prop="contractId" label="编号" align="center"/>
      <el-table-column prop="residentName" label="姓名" align="center"/>
      <el-table-column prop="idCard" label="身份证号" align="center"/>
      <el-table-column prop="phone" label="手机号码" align="center"/>
      <el-table-column prop="packageName" label="服务包" align="center"/>
      <el-table-column prop="serviceName" label="服务项目" align="center"/>
      <el-table-column prop="doctorName" label="服务医生" align="center"/>
      <el-table-column label="服务状态">
        <template #default="service">
          <el-tag :class="statusColors[service.row.status]">{{ service.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="applyTime" label="申请时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="all">
          <el-button link type="primary" @click="goToDetails(all.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
    />
  </div>
</template>

<style scoped>
/* 颜色定义 */
:root {
  --primary-blue: #2984F8;
  --primary-red: #FA746B;
  --primary-green: #3DD4A7;
  --text-black: #333333;
  --text-gray: #666666;
  --border-light: #CCCCCC;
}
.blue-pillar {
  border-radius: 15px !important;
  width: 8px;
  height: 28px;
  background: #2984F8;
  margin-right: 12px;
}
.service-title {
  font-size: 20px;
  color: #303133;
  font-weight: 600;
  letter-spacing: 1px;
}
.header-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  height: 20px;
}
.service-container {
  padding: 20px;
  background: white;
}

/* 筛选区域样式 */
.filter-section {
  background: white;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.el-select, .el-input {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 表格样式 */
.service-table {
  width: 100%;
  margin-bottom: 20px;
}

.service-table :deep(th) {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.service-table :deep(td) {
  font-size: 13px;
  color: #666666;
}

/* 状态标签样式 */
.el-tag {
  border: none;
  color: white;
  font-size: 12px;
}

.status-blue {
  color: #2984F8;
  background-color: transparent !important;
}

.status-grey {
  color:#999999;
  background-color: transparent !important;
}

.status-purple {
  color: #6C76F4;
  background-color: transparent !important;
}

/* 分页样式 */
.pagination {
  justify-content: flex-end;
  padding: 20px 0;
}

/* 按钮样式调整 */
.el-button {
  font-size: 14px;
  font-weight: 500;
}

.el-button--primary {
  border-color: #2984F8;
  border: none;
}
.filter-label {
  color: #666666;
  font-size: 12px;
  margin-right: 10px;
  white-space: nowrap;
}
.filter-item {
  display: flex;
  align-items: center;

}



</style>